Complex Tables

The next HTML5 table example is about complex tables where merging data cells with rowspan and colspan that indicate number of rown or columns occupied by a cell.
Complex table example is shown hereL 
	<!DOCTTYPE html> 

	<!--Example: Complex Table.html --> 

		<html> 

			<head> 

				<title> This is a complex Table example </title> 

			</head> 

			<body> 

				<h1> Complex Table Example using colspan, rowspan, thead, th, tbody </h1> 

				<table border = "2"> 

				<caption>Books Edited by Zoheir Ezziane </caption> 

				<thead> 

					<!-- colspans and rowspans merge cells horizontally or vertically --> 

					<!-- merging three rows --> 

						<th rowspan = "3" > 

						<img src = "Zoheir's book1.png" with = "300" height = "200" alt = "Advanced Quantum Systems Research"> 

						</th> 

					
					<!-- merging five columns --> 

						<img src = "Zoheir's book2.png" with = "300" height = "200" alt = "Contemporary Research in Quantum Computing Systems"> 

				</head> 

				<tbody> 

					<tr> 

					<th> Number of authors in the first book </th > 

					<td> 10 </td> 

					</tr> 

					
					<tr> 

					<th> Number of authors in the seond book </th > 

					<td> 13 </td> 

					</tr> 

				</tbody> 

				</table> 

			</body> 

		</html>

If the two pictures are available in the same folder where your HTML file is then the rendered complex table example is shown here:


For more details, please contact me here.
Date of last modification: 2020.